<template>
  <d2-container>
    <el-main>
      <h4>请假人：</h4>
      <h4
        style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px"
      >{{name}}</h4>
      <h4>联系电话：</h4>
      <h4
        style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px"
      >{{cellphone}}</h4>
      <h4>请假事由：</h4>
      <h4
        style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px"
      >{{title}}</h4>
      <h4>请假备注：</h4>
      <h4
        style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding:10px"
      >{{remark}}</h4>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <h3>开始日期：</h3>
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder=""
              :disabled="disabled"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <h3>结束日期：</h3>
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder=""
              :disabled="disabled"
            ></el-date-picker>
          </div>
        </el-col>
      </el-row>
      <h4>请假证明：</h4>
      <div v-for="img in imgs" :key="img">
        <el-image :src="img" :preview-src-list="imgs" style="width:25%;float:left;margin:4%"></el-image>
      </div>
    </el-main>
    <el-footer>
      <el-button type="success" @click="agree">通过</el-button>
      <el-button type="danger" @click="refuse">拒绝</el-button>
    </el-footer>
  </d2-container>
</template>

<script>
// import { request } from "http";
import request from "@/plugin/axios";
import { constants } from "crypto";
import imgUrl from "@/libs/util.imgUrl.js";
export default {
  data() {
    return {
      editShow: false,
      disabled: false,
      id: undefined,
      title: "",
      name:"",
      cellphone:"",
      remark: "",
      imgs: [],
      startDate:'',
      endDate:''
    };
  },
  methods: {//审批状态 -1已取消 0申请中 2同意 3拒绝
    agree() {
      this.$confirm("此操作审批通过, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: "/leaveRecord/updateLeaveRecord",
            method: "post",
            data: { _id: this.id, status: 2 }
          }).then(res => {
            if (res.code == 200) {
              this.refresh = true
              this.$message({
                message: "审批通过"
              });
          this.$router.push({path: "/leave-record-list"})
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    refuse() {
      this.$confirm("此操作拒绝审批通过, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: "/leaveRecord/updateLeaveRecord",
            method: "post",
            data: { _id: this.id, status: 3 }
          }).then(res => {
            if (res.code == 200) {
              this.refresh = true
              this.$message({
                message: "审批未通过"
              });
          this.$router.push({path: "/leave-record-list"})
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    getLeaveRecordOne(id) {
      request({
        url: "/leaveRecord/getLeaveRecordOne",
        method: "post",
        data: { id: id }
      }).then(res => {
        if (res.code == 200) {
          if (res.data.imageLink != undefined){
            this.imgs = res.data.imageLink.map(e=>{return 'https://' + e})
          }
          
          this.id = res.data._id;
          this.remark = res.data.remark;
          this.title = res.data.reason[0];
          this.startDate = res.data.applyTime.startTime;
          this.endDate = res.data.applyTime.endTime;
          this.name = res.data.staff.name;
          this.cellphone = res.data.staff.cellphone
          console.log(res);
        }
        // 返回数据
      });
    }
  },
  beforeRouteLeave(to,from,next){
        if (this.refresh){
          to.meta.refresh = 'a'
          this.refresh = undefined
        }
        

        next()
        },
  created() {
    if (this.$route.query.id != undefined) {
      this.getLeaveRecordOne(this.$route.query.id);
      this.editShow = true;
      this.disabled = true;
    }
  }
};
</script>
